<template>
    <div class="art_content">
        <rich-text :nodes="artContent"></rich-text>
    </div>
</template>

<script setup lang="js">
import { onLoad } from "@dcloudio/uni-app";
import {ref, reactive } from "vue"
import { getArticleDetailByFId } from '@/api/base'
let artId = ''
const artContent = ref('')
onLoad((options) => {
    if(options.title) {
        uni.setNavigationBarTitle({
            title: options.title
        })
    }

    artId = options.artId
    getArticle()
})

const getArticle = () => {
    getArticleDetailByFId({
        artId: artId
    }).then(res => {
        let detail = res.data
        let content = res.data.desc
        let fArtContext = content.fArtContext;
        fArtContext = fArtContext.replace(/<img[^>]*>/gi, function(match, capture) {
            var match = match.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/gi, 'style="max-width: 100%; height: auto"');
            return match;
        });
        fArtContext = fArtContext.replace(/\<img/gi, '<img style="max-width: 100%; height: auto"');
        fArtContext = fArtContext.replace(/(<p)/gi, '|$1');
        let contentArr = fArtContext.split('|');
        contentArr.forEach((item, index) => {
            if (/<img.*?src=/gi.test(item) && item.indexOf('indent') > -1) {
                console.log(index);
                contentArr[index] = item.replace(/(<p .*?)text-indent.*?;(.*?<img)/, '$1$2');
            }
        });
        fArtContext = contentArr.join('');
        artContent.value = fArtContext;
    })
}

</script>
<style lang="scss" scoped>
.art_content{
    padding: 0 30rpx;
    background-color: #fff;
}

</style>
